<template>
  <div class="bod" style="padding-left: 5%;background-color: green;">
    <van-image  round  width="100px"  height="100px" :src="`http://127.0.0.1:8000`+user?.img" @click="upavatar"/>
    <div style="display: inline-block;"><p >{{ user?.name || "小猫咪"}}</p><van-icon name="edit" class="edit-icon" @click="showNameEdit = true" /></div>
<van-dialog v-model:show="showNameEdit" title="修改用户名" show-cancel-button @confirm="updateUsername">
  <van-field v-model="newUsername" placeholder="请输入新用户名" />
</van-dialog>
        
  </div>
  
          
          <!-- <div class="user">{{ userinfo.score }} <br>我的积分</div>
          <div class="user">{{ userinfo.coupon }}张<br>优惠券</div> -->
    <div class="dd">
      <p><span style="margin-left: 5px; font-weight: 700;" >我的订单</span><span style="float: right;margin-right: 3%;">查看全部订单></span></p>
      <p>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '待支付' } });"><van-icon name="paid"  size="50px"/><br>待支付</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '待出行' } });"><van-icon name="https://s1.chu0.com/src/img/png/9d/9d89345f8d444d3b8e4a60106e17c774.png?imageMogr2/auto-orient/thumbnail/!487x487r/gravity/Center/crop/487x487/quality/85/%7CimageView2/2/w/487%7Cwatermark/3/image/aHR0cHM6Ly9zMS5jaHUwLmNvbS93YXRlcm1hcmsvbWlkZGxlLTEtRzUucG5nP2U9MjA1MTAyMDgwMCZ0b2tlbj0xc3JuWkdMS1owQXFsejZkazd5RjRTa2lZZjRlUC1ZckVPZE0xc29iOl85NFljN2ZiY21iTVdhTGY5QThlZUZBZ0o2cz0=/dissolve/100/gravity/Center/dx/20/dy/-26&e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:7Wnk78XIwLgKKxGkG_Yd6M_w3gw=" size="50px"/><br>待出行</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '待评价' } });"><van-icon name="https://s1.aigei.com/src/img/png/16/16588d08366749e0b12492786f9d28f0.png?imageMogr2/auto-orient/thumbnail/!487x487r/gravity/Center/crop/487x487/quality/85/%7CimageView2/2/w/487%7Cwatermark/3/image/aHR0cHM6Ly9zMS5haWdlaS5jb20vd2F0ZXJtYXJrL21pZGRsZS0xLUw1LnBuZz9lPTIwNTEwMjA4MDAmdG9rZW49UDdTMlhwemZ6MTF2QWtBU0xUa2ZITjdGdy1vT1pCZWNxZUpheHlwTDpfcUVuRU5VTXFlZXExb3RKbXpLVmNpVjVXMG89/dissolve/100/gravity/Center/dx/9/dy/21&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:9oei9ZWmOUk-LKNWCt3aicFAUWI=" size="50px"/><br>待评价</div>
        <div @click="this.$router.push({ path: '/dd', query: { activeName: '全部订单' } });"><van-icon name="apps-o" size="50px"/><br>全部订单</div>
      </p>
    </div>
    <div class="gnfw">
      <h4>我的钱包</h4>
      <p>
        <div>{{ user?.coupon || 0}} 张 <br>优惠券</div>
        <div>{{ user?.score  || 0}}  <br>积分</div>
        
      </p>
    </div>
    <van-cell title="修改密码"  icon="lock"is-link />
      <van-cell title="更换手机号" icon="phone-o" is-link to="/set"/>
      <van-cell title="消息通知设置" icon="bell" is-link />
      <van-cell title="问题反馈" icon="question-o" is-link to="/feedback" />
      <van-cell title="关于我们" icon="info-o" is-link />
    
<dibudaohang/>
</template>


<script setup>
import { ref,onMounted } from 'vue';
import { createApp } from 'vue';
import { useRouter } from 'vue-router';
import dibudaohang from './dibudaohang.vue';
import http from '../http';
const router = useRouter();
const user = ref({});
const showNameEdit = ref(false);
const newUsername = ref('');

const updateUsername = () => {
  http.post('/user/update/name/', {
    userid: localStorage.getItem('userid'),
    name: newUsername.value
  }).then(() => {
    getUser();
    showNameEdit.value = false;
  });
};
const getUser = () => {
  http.get('/user/user/',{params: {userid: localStorage.getItem('userid')}}).then(res => {
    user.value = res.data;
    console.log(user.value);
  })
}
const upavatar = () => {
  if (!localStorage.getItem('userid')) {
    router.push('/login');
    return;
  }
  router.push('/upavatar');
};
const gosmrz = () => {
  router.push('/smrz'); // 跳转到实名认证页面

};
const active = ref(4);
const icon = {
  home: '/path/to/home-icon.png',
  search: '/path/to/search-icon.png',
  group: '/path/to/group-icon.png',
  helper: '/path/to/helper-icon.png',
  my: '/path/to/settings-icon.png',
  active: '/path/to/active-icon.png'
};

onMounted(() => {
  getUser();
})

</script>
<style scoped>
.bod {
  background-color: #eceaea;
  justify-content: center;
 
}
.dd {
  background-color: #ffffff;
  display: block;
  width: 100%;
}
.dd p {
  width:100%;
}
.dd p div{
  display: inline-block;
  width: 20%;
  padding-left: 5%;
}
.gnfw{
  background-color: #ffffff;
  display: block;
  width: 100%;
}
.gnfw div{
  display: inline-block;
  width: 20%;
  padding-left: 5%;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}

</style>